<template>
  <view class="goods-card flex" @click="rowClick">
    <view class="delete-btn" @click.stop="handleDelete">
      <uni-icons type="trash" size="24" color="#ff4444" v-if="disabled"/>
    </view>
    <!-- 商品图片区域 -->
    <view class="goods-image-wrapper">
      <image
          class="goods-image"
          :src="getListImageUrl(item.goodsPhoto)"
          mode="aspectFill"
          :style="{ borderRadius: imageRadius }"
      />
    </view>

    <!-- 商品信息区域 -->
    <view class="goods-content flex-column">
      <!-- 分类标签 -->
      <text :class="['category-tag']">{{ item.goodsClassifyThreeId_dictText || item.goodsClassifyThreeName|| ''  }}</text>
      <!-- 商品主信息 -->
      <view class="goods-meta">
        <view class="goods-title-container flex-row">
          <text class="goods-title">{{ item.goodsTitle }}</text>
          <view class="goods-number">
            <slot name="number" :_item="item"/>
          </view>
        </view>
        <view class="goods-price flex-row">
          <text class="goods-specs">{{ item.specsTitle || item.specsName }}</text>
          <view class="giveaway-wrapper">
            <slot name="giveaway" :_item="item"/>
          </view>
        </view>
      </view>
      <!-- 动态信息展示 -->
      <view class="goods-dynamic flex">
        <view class="quantity-info">
          <slot name="quantity" :_item="item"/>
          <slot name="stockQuantity" :_item="item"/>
        </view>
        <!-- 操作按钮 -->
        <view class="dynamic-right">
          <slot name="button" :_item="item"/>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import MyButton from "../functional/button/myButton.vue";
import {getListImageUrl} from "../../utils";

export default {
  name: "ItemView",
  components: {MyButton},
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      required: true
    },
    isIn: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isAccessory() {
      return this.item.goodsClassifyOneName === '配件'
    },
    imageRadius() {
      return this.isIn ? '16rpx' : '8rpx'
    }
  },
  mounted() {
    // console.log(this.item)
  },
  methods: {
    getListImageUrl,
    handleOperation() {
      this.$emit(this.isIn ? 'store' : 'remove', this.item)
    },
    rowClick() {
      this.$emit('click', this.item);
    },
    handleDelete() {
      if (!this.disabled) return
      this.$emit('delete', this.item);
    },
  }
}
</script>

<style scoped lang="scss">
$primary-color: #FF3434;
$text-primary: #333;
$text-secondary: #666;
$border-color: #eee;
$radius-base: 16rpx;

// 设计系统变量
$primary-color: #1890ff;
$danger-color: #ff4d4f;
$text-primary: rgba(0, 0, 0, 0.85);
$text-secondary: rgba(0, 0, 0, 0.65);
$border-color: #f0f0f0;
$radius-base: 8rpx;
$spacing-base: 24rpx;

.goods-card {
  position: relative; // 关键定位属性
  padding: $spacing-base;
  background: #fff;
  border-radius: $radius-base;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  border-bottom: 0.1rem solid #efefef;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  }

  .delete-btn {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    z-index: 2;
    padding: 8rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.2s;

    &:active {
      transform: scale(0.9);
      opacity: 0.8;
    }

    // 修复点击穿透问题
    &::after {
      content: '';
      position: absolute;
      top: -16rpx;
      right: -16rpx;
      bottom: -16rpx;
      left: -16rpx;
    }
  }

  .goods-image-wrapper {
    flex-shrink: 0;
    width: 160rpx;
    height: 160rpx;
    background: #f5f5f5;
    border-radius: $radius-base;
    overflow: hidden;

    .goods-image {
      width: 100%;
      height: 100%;
      transition: opacity 0.3s;
    }
  }

  .goods-content {
    flex: 1;
    margin-left: $spacing-base;
    gap: 16rpx;

    .category-tag {
      margin-top: -32rpx; // 补偿顶部padding
      align-self: flex-start;
      padding: 4rpx 12rpx;
      background: #f0f5ff;
      border-radius: 4rpx;
      color: $primary-color;
      font-size: 24rpx;
    }
    /* 深度穿透语法（如需要） */
    ::v-deep .category-tag {
      margin-top: -32rpx; // 补偿顶部padding
      align-self: flex-start;
      padding: 4rpx 12rpx;
      background: #f0f5ff;
      border-radius: 4rpx;
      color: $primary-color;
      font-size: 24rpx;
    }


    .goods-meta {
      display: flex;
      flex-direction: column;
      gap: 8rpx;

      .goods-title-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20rpx;
        width: 100%;

        .goods-title {
          font-size: 28rpx;
          color: $text-primary;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          flex: 1;
          min-width: 0; // 关键属性：防止内容溢出

        }

        .goods-number {
          flex-shrink: 0;
          font-size: 24rpx;
          color: $text-secondary;
          padding-left: 20rpx;
        }
      }


      .goods-specs {
        font-size: 24rpx;
        color: $text-secondary;
      }

      .goods-price {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .giveaway-wrapper {
          margin-left: auto; // 关键右对齐属性
          padding-left: 20rpx;
          flex-shrink: 0; // 防止内容挤压

          // 兼容旧版浏览器
          &:empty {
            display: none;
          }
        }
      }
    }

    .goods-dynamic {
      justify-content: space-between;
      align-items: center;


      .quantity-info {
        font-size: 26rpx;

        .quantity-label {
          color: $text-secondary;
          margin-right: 8rpx;
        }

        .quantity-value {
          color: $primary-color;
          font-weight: 500;
        }

        .serial-number,
        .stock-quantity {
          color: $text-primary;
        }
      }

      .dynamic-right {
        flex-shrink: 0;
        display: flex;
        gap: 20rpx;
        align-items: center;
      }
    }
  }
}

.flex {
  display: flex;

  &-row {
    flex-direction: row;
  }

  &-column {
    flex-direction: column;
  }
}

$gap-base: 16rpx;
.gap- {
  &8 {
    gap: 8rpx
  }

  &16 {
    gap: $gap-base
  }

  &24 {
    gap: 24rpx
  }
}
</style>
